<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="列表" name="first">
                <el-row :gutter="20">
                    <el-col :span="15">
                        <div class="grid-content bg-purple">
                            <el-button size="mini" round @click="add()" icon="el-icon-plus">新增机构信息</el-button>
                            <el-button size="mini" round @click="edit()" icon="el-icon-edit"
                                :disabled="selectList.length == 0 || selectList.length > 1">修改机构信息</el-button>
                            <el-button size="mini" round @click="dele()" icon="el-icon-delete"
                                :disabled="selectList.length == 0">删除机构信息
                            </el-button>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="grid-content bg-purple searchBox">
                            <el-input size="mini" v-model="formInline.user" placeholder="请输入ID进行查询">
                            </el-input>
                            <el-button size="mini" round @click="search()" style="margin-left: 10px;"
                                icon="el-icon-search">查询</el-button>
                            <el-button size="mini" round @click="search()" icon="el-icon-refresh">刷新</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-table :data="tableData" ref="tableDataTotal" border style="width: 100%;margin-top: 15px;"
                    @row-click="clickRow" stripe :row-style="rowStyle" :row-class-name="rowClassName"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40px"></el-table-column>
                    <el-table-column sortable fixed prop="ID" label="ID" width="120">
                    </el-table-column>
                    <el-table-column sortable prop="name" label="检测机构名称" width="120">
                    </el-table-column>
                    <el-table-column sortable prop="address" label="检测机构地址" width="300">
                    </el-table-column>
                    <el-table-column sortable prop="phoneNumber" label="联系电话" width="150">
                    </el-table-column>
                    <el-table-column sortable prop="startTimer" label="开始检测时间" width="220">
                    </el-table-column>
                    <el-table-column sortable prop="endTimer" label="结束检测时间" width="220">
                    </el-table-column>
                    <el-table-column sortable prop="source" label="是否常态化" width="120" fixed="right"
                        :filters="[{ text: '常态化', value: '常态化' }, { text: '非常态化', value: '非常态化' }]"
                        :filter-method="filterTag" filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <span>{{ scope.row.source }}</span>
                            <!-- <el-tag :type="scope.row.source === '常态化' ? 'warning' : 'danger'" disable-transitions>{{ scope.row.source }}
          </el-tag> -->
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
                <el-dialog v-el-drag-dialog class="new-dialog" :title="title + '检测机构信息'" :visible.sync="showFlag"
                    width="50%" @close="handleClose('ruleForm')">
                    <el-card class="box-card" style="padding:5px 10px 0 10px">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                            class="demo-ruleForm">
                            <el-form-item label="检测机构名称" prop="name">
                                <el-input size="mini" v-model="ruleForm.name" placeholder="请输入检测机构名称"></el-input>
                            </el-form-item>
                            <el-form-item label="检测机构地址" prop="address">
                                <el-input size="mini" v-model="ruleForm.address" placeholder="请输入检测机构地址"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="phoneNumber">
                                <el-input size="mini" v-model="ruleForm.phoneNumber" placeholder="请输入联系电话"></el-input>
                            </el-form-item>
                            <el-form-item label="核酸检测时间" required>
                                <el-col :span="11">
                                    <el-time-picker v-model="ruleForm.startTimer" size="mini" :picker-options="{
                                        selectableRange: '06:00:00 - 20:00:00'
                                    }" placeholder="请选择开始时间">
                                    </el-time-picker>
                                </el-col>
                                <el-col class="line" :span="2" style="text-align:center">-</el-col>
                                <el-col :span="11">
                                    <el-time-picker v-model="ruleForm.endTimer" size="mini" :picker-options="{
                                        selectableRange: '06:00:00 - 20:00:00'
                                    }" placeholder="请选择结束时间">
                                    </el-time-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="是否为常态化" prop="source">
                                <el-select size="mini" v-model="ruleForm.source" placeholder="请选择是否常态化">
                                    <el-option label="常态化" value="yes"></el-option>
                                    <el-option label="非常态化" value="no"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <div slot="footer" class="dialog-footer">
                        <el-button round size="mini" @click="handleClose('ruleForm')">取 消</el-button>
                        <el-button round size="mini" type="primary" @click="save('ruleForm')">确 定</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="地图" name="second">
                <myMap></myMap>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>

import elDragDialog from "@/utils/dragDialog";
import * as echarts from 'echarts';
import myMap from './components/myMap.vue'
export default ({
    components: { myMap },
    directives: { elDragDialog },//dialog弹窗可拖拽
    data() {
        return {
            activeName: 'first',
            tableData: [{
                ID: '1',
                name: '核子基因科技北京华曦医学检验实验室核酸采样点',
                address: '北京市通州区经海四路156号院6号',
                phoneNumber: '123456789',
                startTimer: '6:00',
                endTimer: '17:00',
                source: '常态化'
            }
                , {
                ID: '2',
                name: '北京元码医学检验实验室核酸采样点',
                address: '北京市朝阳区广顺北大街5号融创动力',
                phoneNumber: '123456789',
                startTimer: '6:00',
                endTimer: '17:00',
                source: '常态化'
            }, {
                ID: '3',
                name: '卡尤迪核酸检测核酸采样点(北京)有限公司核酸采样点(天兴家园采样站)',
                address: '北京市丰台区看丹街道白盆窑天兴家',
                phoneNumber: '123456789',
                startTimer: '6:00',
                endTimer: '17:00',
                source: '非常态化'
            }, {
                ID: '4',
                name: '北京元码医学检验实验室核酸采样点',
                address: '北京市朝阳区广顺北大街5号融创动力大厦a座4层',
                phoneNumber: '123456789',
                startTimer: '6:00',
                endTimer: '17:00',
                source: '非常态化'
            }, {
                ID: '5',
                name: '首都医科大学附属北京同仁医院东区-核酸检测点',
                address: '北京市东城区东崇文门内大街8号',
                phoneNumber: '123456789',
                startTimer: '6:00',
                endTimer: '17:00',
                source: '常态化'
            }],
            formInline: {
                user: ''
            },
            currentPage: 1,
            showFlag: false,
            ruleForm: {
                name: '',
                address: '',
                phoneNumber: '',
                startTimer: '',
                endTimer: '',
                source: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入检测机构名称', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入检测机构地址', trigger: 'blur' },
                ],
                phoneNumber: [{ required: true, message: "手机号不能为空", trigger: "blur" },
                { min: 11, message: "手机号格式不正确", trigger: "blur" }],
                source: [
                    { required: true, message: '是否为常态化', trigger: 'change' }
                ],
            },
            selectList: [],
            tableDataTotal: 0,
            title: '',
        }
    },
    methods: {
        filterTag(value, row) {
            return row.tag === value;
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }, handleSelectionChange(val) {
            console.log(val)
            this.selectList = val;
        },
        clickRow(row) {
            console.log(row)
            this.$refs.tableDataTotal.toggleRowSelection(row);
        },
        rowStyle({ row, rowIndex }) {
            Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
                value: rowIndex,
                writable: true,
                enumerable: false
            })
        },
        rowClassName({ row, rowIndex }) {
            let rowName = "",
                findRow = this.selectList.find(c => c.rowIndex === row.rowIndex);
            if (findRow) {
                rowName = "currentRowStyle "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
            }
            return rowName; //也可以再加上其他类名 如果有需求的话
        },
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange(val) {
            // this.pageSize = val;
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        search() {

        },
        add() {
            this.title = '新增'
            this.showFlag = true
        },
        edit() {
            console.log(this.selectList)
            this.title = '修改'
            this.showFlag = true
            this.ruleForm = {
                name: this.selectList[0].name,
                address: this.selectList[0].address,
                phoneNumber: this.selectList[0].phoneNumber,
                startTimer: this.selectList[0].startTimer,
                endTimer: this.selectList[0].endTimer,
                source: this.selectList[0].source
            }
        },
        dele() {
            var delArr = [];
            this.selectList.map((item) => {
                delArr.push(item.ID)
            })
            console.log(delArr)
            this.$confirm('此操作将永久删除id为' + delArr.join(',') + '的信息, 是否继续?', '删除提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    message: '删除成功!',
                    type: 'success'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        save(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm)
                    this.$message({
                        message: this.title + '成功!',
                        type: 'success'
                    });
                    this.showFlag = false
                } else {
                    this.$message.error(this.title + '失败!');
                    return false;
                }
            });
        },
        handleClose(formName) {
            this.showFlag = false
            this.$refs[formName].resetFields();
        },
    }
})
</script>
<style scoped>
.searchBox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
</style>
